<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影天堂 - 看电影就上电影天堂</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
</head>
<body>
<!-- 头部区域 -->
<header th:replace="~{top}"></header>

<!-- 主要内容区域 -->
<main>
    <div class="auth-container">
        <div class="auth-form">
            <h2>注册</h2>
            <form id="register-form" action="/user/register" method="post">
                <div class="form-group">
                    <label for="reg-username">用户名</label>
                    <input type="text" id="reg-username" name="username" required>
                </div>
                <div class="form-group">
                    <label for="reg-email">电子邮箱</label>
                    <input type="email" id="reg-email" name="email" required>
                    <span id="email-error"></span>
                </div>
                <div class="form-group">
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password" name="password" required>
                    <span id="password-strength"></span>
                </div>
                <div class="form-group">
                    <label for="reg-confirm-password">确认密码</label>
                    <input type="password" id="reg-confirm-password" name="confirmPassword" required>
                    <span id="confirm-password-error"></span>
                </div>
                <button type="submit" class="btn btn-primary btn-block">注册</button>
            </form>
            <div class="auth-footer">
                <p>已有账号? <a href="/user/login">立即登录</a></p>
            </div>
        </div>
    </div>
</main>

<!-- 页脚区域 -->
<footer th:replace="~{footer :: footer}"></footer>

<!-- 站点 JavaScript -->
<script>
    $(document).ready(function() {
        // 邮箱检查
        $('#reg-email').on('blur', function() {
            const email = $(this).val();
            if (email && isValidEmail(email)) {
                $.get('/user/check-email?email=' + encodeURIComponent(email), function(data) {
                    if (data===true) {
                        $('#email-error').text('邮箱可用').css('color', 'green');
                    } else {
                        $('#email-error').text('邮箱已被注册').css('color', 'red');
                    }
                }).fail(function() {
                    $('#email-error').text('检查邮箱时出错').css('color', 'red');
                });
            } else {
                $('#email-error').text('请输入有效的邮箱地址').css('color', 'red');
            }
        });

        // 密码强度检查
        $('#reg-password').on('input', function() {
            const password = $(this).val();
            const strength = checkPasswordStrength(password);
            $('#password-strength').text(strength.message).css('color', strength.color);
        });

        // 确认密码检查
        $('#reg-confirm-password').on('input', function() {
            const password = $('#reg-password').val();
            const confirmPassword = $(this).val();
            if (password !== confirmPassword) {
                $('#confirm-password-error').text('密码不匹配').css('color', 'red');
            } else {
                $('#confirm-password-error').text('密码匹配').css('color', 'green');
            }
        });
    });

    // 辅助函数：验证邮箱格式
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    // 辅助函数：检查密码强度
    function checkPasswordStrength(password) {
        if (password.length < 6) {
            return { message: '密码较弱', color: 'red' };
        } else if (password.length < 10) {
            return { message: '密码强度中等', color: 'orange' };
        } else {
            return { message: '密码强度高', color: 'green' };
        }
    }

    $(document).ready(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const message = urlParams.get('error');

    if (message) {
        alert(message);
        // 或者使用更优雅的提示方式，例如：
        // $('#message-modal').modal('show');
        // $('#message-content').text(message);
        }
    });
</script>
</body>
</html>